<template>
<div class="video-detail">
<section>

<mt-header fixed title="环裕视讯">
  <router-link to="/" slot="left">
    <mt-button icon="back"></mt-button>
  </router-link>
</mt-header>
</section>

<section class="container">

<div>{{videoDetail}}</div>

<div class="video-warp">

<video-player  ref="videoPlayer"
                 :options="playerOptions">
  </video-player>
</div>


</section>




</div>

</template>

<script>

import {mapGetters} from 'vuex'
   export default {

     name: 'videoDetail',

      data() {
      return {
        playerOptions: {
 
          // component options
          start: 0,
          playsinline: false,
 
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "http://www.hyjf360.com/manage/media/35aed8fd9224afd65f0fc026118ba616.mp4"
          }],
          height: 200
        }
      }
    },
     
     components: {
         
         
     },
     created() {
        let id = this.$route.params.id
        this.$store.dispatch('getPeriodicalDetail', { id: id })

     },
     computed: {
       ...mapGetters({
         videoDetail: 'videoDetail'
       })
     }

     
   }
</script>

<style lang="scss">

.container {
  margin-top:40px;

  .video-warp {
    width: 100%;
    height: auto;
    video {
      height: 100%;
      width: 100%;
    }
  }
}



  
 


    
</style>